<!--
*@Author: QWP
*@Description: 综合预警
*@Date: 2024-07-18 14:05:35
-->
<template>
  <u-card title="重大隐患情况">
    <a-flex>
      <u-table :columns="regionCols"
        :data="regionDatas"
        :pagination="false"
        :scroll="{ y: 200 }"
        >
      </u-table>
    </a-flex>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import USegmented from '@/views/index/emergencyIndex/component/segmented/Index.vue'
import { ColumnProps } from 'ant-design-vue/es/table'
import { ThunderboltOutlined } from '@ant-design/icons-vue'
import { getColor, levMainColor } from '@/views/index/emergencyIndex/data'

const router = useRouter();

let activeKey = ref<string>('1')
const segmentedData = reactive([
  {label: '分地区预警情况', id: '1', },
  {label: '分企业类型预警情况', id: '2'}
]);

onMounted(() => {
  for(let i = 0; i < 21; i++) {
    regionDatas.push({ 
      index1: i+1, 
      dq: `地区${i+1}`, 
      qylx: `企业类型${i+1}`, 
      lev3: Math.floor(Math.random() * 60),
      yzg: Math.floor(Math.random() * 30),
      wzg: Math.floor(Math.random() * 30)
    })
  }
})

let regionDatas = reactive<any[]>([]);
const regionCols = reactive<ColumnProps[]>([
  { title: '序号', dataIndex: 'index1', width: 50 },
  { title: '地区', dataIndex: 'dq', minWidth: 100 },
  { title: '重大隐患数', dataIndex: 'lev3', width: 100, align: 'center',
    customRender: ({ text }) => {
      return h("div",{ style: { cursor: 'pointer' }, onclick: () => toHideWraning() },   [
        h(ThunderboltOutlined, { style: { color: levMainColor[2] } }),
        h('span', { style: {marginLeft: '6px'} }, text)
      ])
    }
  },
  { title: '已整改', dataIndex: 'yzg', minWidth: 100 },
  { title: '未整改', dataIndex: 'wzg', minWidth: 100 },
])

// 跳转至综合预警
const toHideWraning = () => {
  router.push({
    path: '/TransitIndex/HideDangerCheck',
    query: {
      _tab: 1
    }
  })
}


</script>

<style lang='scss' scoped>
</style>